<template>
  <view class="">

    <u-popup v-model="show" mode="bottom" border-radius="16" closeable="true" @close="show=false">
      <view class="popCont">
        <view class="title">支付</view>
        <view class="payNews flex-center-center">
          <view class="word">所需支付的金额</view>
          <view class="monye">￥ <text>{{formData.total_money}}</text> </view>
        </view>
        <view class="payType flex-center-between">
          <view class="payType-left">
            支付方式
          </view>
          <view class="payType-right flex-center-between">
            <uni-data-select v-model="formData.payment" :localdata="range" placeholder="选择支付方式" @change="change"></uni-data-select>
          </view>
        </view>
        <view @click="createPay" class="popBtn flex-center-center">
          确认订单 ￥{{formData.actual_money}}
        </view>
        <view :style="'height:'+safeAreaBottom+'px'"></view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import api from '@/api/index.js';
export default {
  data() {
    return {
      show: false,
      range: [{
        value: 'wxpay',
        text: "微信"
      },
      {
        value: 'alipay',
        text: "支付宝"
      },
      ],
      formData: {
        total_money: '',
        actual_money: '',
        payment: 'wxpay',
        type: 1,
        terminal: uni.getSystemInfoSync().platform
      },
      type: ''
    }
  },
  methods: {
    open(data) {
      this.type = data.type
      this.formData = {
        ...this.formData,
        ...data
      };
      this.show = true;
    },
    createPay() {
      console.log('订单信息参数', this.formData)
      // return;
      if (this.type == '3') {
        api.base.commonPay(this.formData).then(res => {
          console.log(res.data.number)
          this.show = false;
          this.$emit('payBack', this.formData)
        })
      } else {
        this.show = false;
        this.$emit('payBack', this.formData)
      }
    },
    pay(number) {
      api.base.commonPayCall({
        number
      }).then(res => {
        uni.showToast({
          icon: 'none',
          title: '支付成功',
          duration: 2000
        });


      })

    }
  }
}
</script>

<style lang="scss" scoped>
.popCont {
  width: 750rpx;
  background: #ffffff;
  padding: 48rpx 48rpx 10rpx 48rpx;
  box-sizing: border-box;

  .title {
    height: 52rpx;
    font-size: 34rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 51rpx;
  }

  .payNews {
    flex-direction: column;
    margin: 24rpx auto;
    width: 654rpx;
    height: 216rpx;
    background: rgba(255, 37, 68, 0.06);

    .word {
      font-size: 28rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;
      line-height: 42rpx;
    }

    .money {
      height: 78rpx;
      font-size: 36rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #ff2544;
    }

    text {
      font-size: 56rpx;
      font-family: PingFang SC-Heavy, PingFang SC;
      font-weight: 800;
      color: #ff2544;
    }
  }

  .payType {
    width: 654rpx;
    height: 56rpx;
    padding-top: 24rpx;
    border-top: 2rpx solid rgba(0, 0, 0, 0.03);

    &-left {
      font-size: 28rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;
    }

    &-right {
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #999999;

      image {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }

  .popBtn {
    width: 686rpx;
    height: 88rpx;
    margin-top: 160rpx;
    background: #6d0cf7;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    font-size: 28rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #ffffff;
  }
}
</style>